<template>
  <div class="page-list">
    <n-card :bordered="false" class="proCard profile">
      <n-tabs type="line" @updateValue="handleToggleMenu" animated>
        <n-tab-pane
          v-for="item in menuOptions"
          :key="item.key"
          :name="item.label"
          :tab="item.label"
        />
      </n-tabs>
      <div class="profile-content">
        <BasicData :user-info="userInfo" v-if="showBasicData" />
        <UpdatePassword :user-name="userInfo.userName" v-else />
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup name="Profile">
  import { ref } from 'vue';
  import { useMixins } from '@/hooks/useMixins';
  import lang from './lang';
  import { t } from '@/i18n';
  import BasicData from './components/BasicData.vue';
import UpdatePassword from './components/UpdatePassword.vue';
  import { useUserStoreWidthOut } from '@/store/modules/user';
// import { getUserInfoForUserCenter } from '@/api/system/user';

const userStore = useUserStoreWidthOut();

  const { loadLangFn } = useMixins();
  loadLangFn(lang);

  // 默认选中基础资料菜单
  const showBasicData = ref(true);
  // 菜单配置数据
  const menuOptions = [
    {
      label: t('profile.form.basicData'),
      key: 'basic-data',
    },
    {
      label: t('profile.form.updatePassword'),
      key: 'update-password',
    },
  ];
  // 切换菜单
  const handleToggleMenu = (e: any) => {
    showBasicData.value = e === menuOptions[0].label;
  };
  // 获取用户信息
  let userInfo: any = ref({});
  const handleGetProfile = async () => {
    try {
      return await userStore.getInfo();
      // const res = await getUserInfoForUserCenter();
      // const { nickName, userName, phoneCode, remark, id, avatar } = res?.row || {};

      // console.log(res.row);

      // return { nickName, userName, phoneCode, remark, id, avatar };
    } catch (e) {
      console.log(e);
      return {};
    }
  };
  onBeforeMount(async () => {
    const res: any = await handleGetProfile();

    userInfo.value = res;
  });
</script>

<style lang="less" scoped>
  .profile {
    min-height: calc(100vh - 130px);
    // margin-top: -32px;
    z-index: 999;
    :deep(.n-tabs) {
      margin-top: -15px;
      .n-tabs-tab {
        color: #31373d;
        font-size: 16px;
      }
      .n-tabs-tab--active {
        color: #307AFA;
      }
      .n-tabs-bar {
        background-color: #307AFA;
        height: 4px;
      }

      .n-tab-pane {
        padding: 40px 0 0 0;
      }
    }
  }
</style>
